<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片（相册）展示设计Ⅶ</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- 三个为演示所用，可自行调整 -->
  <figure class="sample">
    <img src="https://source.unsplash.com/j9Kbg88xnto" alt="sample1" />
    <figcaption>
      <h3>Harry Dona</h3>
      <!-- 随机文本，Lorem -->
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
    </figcaption>
    <a href="#"></a>
  </figure>

  <figure class="sample hover">
    <img src="https://source.unsplash.com/p2RbLnqWPVY" alt="sample2" />
    <figcaption>
      <h3>Patrick Fore</h3>
      <p>Deleniti, cum sit consectetur minima amet ad rerum? </p>
    </figcaption>
    <a href="#"></a>
  </figure>

  <figure class="sample">
    <img src="https://source.unsplash.com/kDRCsBv3Hc0" alt="sample3" />
    <figcaption>
      <h3>Michael Scherback</h3>
      <p>Provident voluptate magni ducimus reprehenderit consequuntur alias excepturi. </p>
    </figcaption>
    <a href="#"></a>
  </figure>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="./script.js"></script>
</body>
</html>